// 这里要注意：因为init和h使用exports 字段，webPack5才支持，所以这里要导入全路径；
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

const patch = init([])  // 将虚拟DOM转换为真实DOM，并且挂载到DOM树上

// h函数接收两参数
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串就是标签中内容

let vnode = h('div#container.cls', 'Hello World')
let app = document.querySelector('#app')

// patch接收两个参数
// 第一个参数：旧的VNode，也可以是DOM元素
// 第二个参数：新的VNode
// 返回新的VNode
let oldVnode = patch(app, vnode)

vnode = h('div#container.xxx', 'Hello Snabbdom')
patch(oldVnode, vnode)